<template>
  <a-row style="padding: 10px;">
    <a-col span="24">
      <a-form layout="inline">
        <a-form-item label="成员账号">
          <a-input v-model="search.memberAccount" placeholder="请输入成员账号！"></a-input>
        </a-form-item>
        <a-form-item label="成员姓名">
          <a-input v-model="search.memberName" placeholder="请输入成员姓名！"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="searchList">查询</a-button>
        </a-form-item>
      </a-form>
    </a-col>
    <a-col span="24" style="margin: 10px 0">
      <a-button type="primary" @click="invitedUser">邀请成员</a-button>
    </a-col>
    <a-col span="24">
      <a-table :dataSource="data" :columns="columns" :pagination="pagination" :loading="loading" size="small" bordered
               :rowKey="record => record.memberId">
        <template slot="operation" slot-scope="text, record, index">
          <div>
            <span>
              <a @click="() => showOrgPower(record)">组织信息</a>
              <a @click="() => showRolePower(record)">角色信息</a>
              <a v-if="record.state == 1 || record.state == 0" @click="() => updateMember(index)">编辑</a>
              <a v-if="record.state == 1" @click="() => lockMember(index)">冻结</a>
              <a v-if="record.state == 1" @click="() => delMember(index)">删除</a>
              <a v-if="record.state == 2" @click="() => lockMember(index)">解冻</a>
            </span>
          </div>
        </template>
      </a-table>
      <NCPagination :page="pageObj" @changePage="(page)=>{this.pageObj = page}" @searchList="searchList"/>
    </a-col>
    <!-- 邀请成员 -->
    <a-modal v-model="model.visible" title="邀请成员">
      <a-form :form="model.form">
        <a-form-item label="成员电话" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入成员电话！"
                   v-decorator="['invitedUserTelephone', {rules: [{ required: true, message: '请输入成员电话！'}]}]"/>
        </a-form-item>
        <a-form-item label="成员姓名" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入成员姓名！"
                   v-decorator="['invitedUserName', {rules: [{ required: true, message: '请输入成员姓名！'}]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="model.loading" @click="invitedUserOk">
          确定
        </a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
    </a-modal>

    <!-- 所属组织机构信息 -->
    <a-modal v-model="modalOrg.visible" title="所属组织机构信息">
      <a-row>
        <a-col span="24">
          <NCTree :tree-all-data="modalOrg.allOrgTree" :tree-select-data="modalOrg.selectOrgList"
                  @onCheck="(data)=> {modalOrg.selectOrgList = data}" :checkParent="modalOrg.checkParent"/>
        </a-col>
      </a-row>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modalRole.loading" @click="bindOrgMember">
          更新授权组织机构
        </a-button>
        <a-button key="back" @click="modalOrg.visible = false">取消</a-button>
      </template>
    </a-modal>

    <!-- 成员详情信息 -->
    <a-modal v-model="modalRole.visible" title="授权组织机构" width="1200px">
      <a-row>
        <a-col span="24"></a-col>
        <a-col span="24">
          <RoleMenu :role-data="modalRole.selectRoleList" @searchRoleOrgList="getBindRoleByMemberId"
                    :role-page-obj="rolePageObj"/>
        </a-col>
      </a-row>
      <template slot="footer">
        <a-button key="back" @click="modalRole.visible = false">取消</a-button>
      </template>
    </a-modal>

    <a-modal v-model="model.update.visible" title="修改成员信息">
      <a-form :form="model.update.form">
        <a-form-item label="成员账号" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入成员账号！"
                   v-decorator="['memberAccount', {rules: [{ required: true, message: '请输入成员账号！'}]}]"/>
        </a-form-item>
        <a-form-item label="成员姓名" :label-col="model.labelCol" :wrapper-col="model.wrapperCol">
          <a-input placeholder="请输入成员姓名！"
                   v-decorator="['memberName', {rules: [{ required: true, message: '请输入成员姓名！'}]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="model.loading" @click="updateMemberOk">
          确定
        </a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
    </a-modal>
  </a-row>
</template>

<script>
  import NCTree from '../components/NCTree'
  import NCPagination from '../components/NCPagination'
  import RoleMenu from './RoleMenu'

  export default {
    name: 'Member',
    components: {
      NCTree,
      NCPagination,
      RoleMenu
    },
    data () {
      return {
        pageObj: {total: 10, pageSize: 10, pageNum: 1, pageSizeOptions: ['5', '10', '20', '50', '100']},
        rolePageObj: {total: 10, pageSize: 10, pageNum: 1, pageSizeOptions: ['5', '10', '20', '50', '100']},
        search: {
          memberAccount: '',
          memberName: ''
        },
        model: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          loading: false,
          visible: false,
          form: this.$form.createForm(this),
          data: {},
          update: {
            visible: false,
            form: this.$form.createForm(this),
            data: {}
          }
        },
        modalOrg: {
          visible: false,
          checkParent: false,
          allOrgTree: [],
          selectOrgList: []
        },
        modalRole: {
          visible: false,
          selectRoleList: []
        },
        loading: false,
        data: [],
        selectMember: {},
        pagination: false,
        columns: [
          {
            title: '序号',
            width: '20',
            customRender: (text, record, index) => {
              return index + this.pageObj.pageSize * (this.pageObj.pageNum - 1) + 1
            }
          }, {
            title: '成员账号',
            dataIndex: 'memberAccount',
            sorter: true
          }, {
            title: '成员姓名',
            dataIndex: 'memberName',
            sorter: true
          }, {
            title: '手机号',
            dataIndex: 'telephone'
          }, {
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: true
          }, {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            customRender: (text, record, index) => {
              return text === 2 ? '冻结' : '正常'
            }
          }, {
            title: '操作',
            fixed: 'right',
            width: 300,
            scopedSlots: {customRender: 'operation'}
          }
        ]
      }
    },
    mounted () {
      this.searchList()
      this.selectAllOrg()
    },
    methods: {
      // 查询数据
      searchList () {
        this.loading = true
        this.http.post('upmsApi', '/member/getMemberList', {
          pageNum: this.pageObj.pageNum,
          pageSize: this.pageObj.pageSize,
          data: {
            memberAccount: this.search.memberAccount,
            memberName: this.search.memberName
          }
        }).then((res) => {
          if (res.success) {
            this.data = res.rows
            this.pageObj.total = res.total
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        })
      },
      // 邀请成员
      invitedUser () {
        this.model.visible = true
        this.model.data = {}
        this.model.form.setFieldsValue({
          invitedUserTelephone: null,
          invitedUserName: null
        })
      },
      // 显示已分配组织机构信息
      showOrgPower (record) {
        this.modalOrg.visible = true
        this.selectMember = record
        this.getBindOrgByMemberId()
      },
      // 查询所有组织机构
      selectAllOrg () {
        this.http.post('upmsApi', '/org/getOrgTree', {}).then((res) => {
          if (res.success) {
            let allOrgTree = res.rows
            this.handleOrgTree(allOrgTree)
            this.modalOrg.allOrgTree = allOrgTree
          }
        })
      },
      // 处理组织机构树数据
      handleOrgTree (treeList) {
        treeList.forEach(item => {
          item.title = item.orgName
          item.key = item.orgId
          if (item.children) {
            this.handleOrgTree(item.children)
          }
        })
      },
      // 查询绑定的组织机构信息
      getBindOrgByMemberId () {
        this.http.post('upmsApi', '/member/getOrgListByMemberId', {
          pageNum: -1,
          endNode: {
            memberId: this.selectMember.memberId
          }
        }).then((res) => {
          if (res.success) {
            this.modalOrg.selectOrgList = []
            res.rows.forEach(item => this.modalOrg.selectOrgList.push(item.orgId))
          }
        })
      },
      bindOrgMember () {
        this.http.post('upmsApi', '/member/bindOrgMemberByMemberId', {
          sourceIds: this.modalOrg.selectOrgList,
          targetIds: [this.selectMember.memberId]
        }).then((res) => {
          if (res.success) {
            this.$message.info(res.message)
            this.modalOrg.visible = false
          }
        })
      },
      // 显示单独分配的角色信息
      showRolePower (record) {
        this.modalRole.visible = true
        this.selectMember = record
        this.getBindRoleByMemberId()
      },
      // 查询绑定的组织机构信息
      getBindRoleByMemberId () {
        this.http.post('upmsApi', '/member/getRoleListByMemberId', {
          pageNum: -1,
          endNode: {
            memberId: this.selectMember.memberId
          }
        }).then((res) => {
          if (res.success) {
            this.modalRole.selectRoleList = res.rows
          }
        })
      },
      // 更新成员
      updateMember (index) {
        this.model.update.visible = true
        this.model.update.data = this.data[index]
        setTimeout(() => {
          this.model.update.form.setFieldsValue({
            memberAccount: this.model.update.data.memberAccount,
            memberName: this.model.update.data.memberName
          })
        }, 100)
      },
      // 删除成员
      delMember (index) {
        const that = this
        this.$confirm({
          title: '删除成员！?',
          onOk () {
            return new Promise((resolve, reject) => {
              console.log('删除')
              that.http.post('upmsApi', '/member/delMember', {memberId: that.data[index].memberId}).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.searchList()
                  resolve(res.message)
                } else {
                  that.$message.error(res.message)
                  reject(res.message)
                }
              })
            })
          }
        })
      },
      // 锁定/解锁成员
      lockMember (index) {
        console.log('锁定成员' + index)
        const that = this
        this.$confirm({
          title: that.data[index].state === 1 ? '冻结成员！?' : '解冻成员！',
          onOk () {
            return new Promise((resolve, reject) => {
              that.http.post('upmsApi', '/member/lockMember', {
                memberId: that.data[index].memberId,
                state: that.data[index].state === 1 ? 2 : 1
              }).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.searchList()
                  resolve(res.message)
                } else {
                  that.$message.error(res.message)
                  reject(res.message)
                }
              })
            })
          }
        })
      },
      // 邀请成员
      invitedUserOk (e) {
        e.preventDefault()
        this.model.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.model.loading = true
            this.http.post('upmsApi', '/member/inviteMember', {
              ...values
            }).then((res) => {
              if (res.success) {
                this.$message.info(res.message)
                this.searchList()
              } else {
                this.$message.error(res.message)
              }
              this.model.loading = false
              this.model.visible = false
            })
          }
        })
      },
      // 更新成员
      updateMemberOk (e) {
        e.preventDefault()
        this.model.update.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.model.loading = true
            this.http.post('upmsApi', '/member/updateMember', {
              memberId: this.model.update.data.memberId,
              ...values
            }).then((res) => {
              if (res.success) {
                this.$message.info(res.message)
                this.searchList()
              } else {
                this.$message.error(res.message)
              }
              this.model.loading = false
              this.model.update.visible = false
            })
          }
        })
      },
      // 模态框取消
      handleCancel () {
        this.model.visible = false
        this.model.update.visible = false
      }
    }
  }
</script>

<style scoped>

</style>
